<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-save">
        <div class="row cl">
            <label class="form-label f-18">
                请选择头像：</label>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <div class="formControls" id="div-picture">
                <input type="hidden" class="input-text" value="{$avatar}" name="avatar" id="avatar">
                <div style="width: 320px;height: 320px;margin: 0 auto;">
                    <img id="view-img" src="{$avatar ? $avatar : '/static/images/upload_picture.png'}" title="更换头像"
                        style="max-width: 300px;max-height: 300px;">
                </div>
            </div>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-success radius" type="button" id="form-save-button"
                    value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-default radius" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;"
                    onClick="layer_close();">
            </div>
        </div>
    </form>
    <!-- 图像上传 -->
    <div>
        <input type="file" hidden name="image" id="upload_picture">
    </div>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 图片上传
    (function () {
        const div = document.getElementById('div-picture');
        const file = document.querySelector('input[type="file"]');

        function fn() {
            file.oninput = function () {
                if (file.files && file.files[0]) {
                    // console.log(file.files[0]);
                    var formData = new FormData();
                    formData.append('watermark', 0);
                    formData.append("upload_file", file.files[0]);
                    $.ajax({
                        url: '{:url("/sys/file_manager/uploadImage")}',
                        type: "post",
                        data: formData,
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                        dataType: 'json',
                        success: function (res) {
                            // console.log(res);
                            var img = res.data.filename;
                            $("#view-img").attr('src', img);
                            $("#avatar").val(img);
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            });
                        },
                        error: function (res) {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 1000
                            });
                            return false;
                        }
                    });
                }
            }
        }

        div.addEventListener('click', function (e) {
            // file模拟input点击事件
            var evt = new MouseEvent("click", {
                bubbles: false,
                cancelable: true,
                view: window,
            });
            file.dispatchEvent(evt, fn());
        }, false);
    })()

    $("#form-save-button").click(function () {
        var avatar = $("#avatar").val();
        $.ajax({
            type: 'POST',
            url: '{:url("avatar")}',
            data: {
                avatar: avatar,
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, { icon: 1, time: 500 }, function () {
                        // parent.location.reload(); // 父页面刷新 
                        window.parent.$(".img-circle").attr('src', avatar);  // 父页面头像更换
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1000
                    });
                    return false;
                }
            }
        })
    })
</script>
<!--请在上方写此页面业务相关的脚本-->